<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">

    <button @click="roll">滚起来</button>
    <button @click="stop">停下!</button>

    <p>{{ msg }}</p>

  </div>
  <script>
    // 在Vue实例创建时, 会将data和methods中的所有内容挂载到vm实例身上
    // 如何印证? 输出vm实例
    // let timerId // 全局作用域污染
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '今天天气真好哇!',
        timerId: null
      },
      methods: {
        roll() {
          // console.log('我被点了')

          // this.foo()
          // DOM  BOM : 定时器
          clearInterval(this.timerId)
          this.timerId = setInterval(() => {
            // substr : 参数1: 开始的索引  参数2: 截取多少个
            // substring: 参数1: 开始的索引  参数2: 结束的索引
            let head = this.msg.substr(0, 1)
            // this => 指VM实例
            let end = this.msg.substr(1)
            // console.log(head, end)
            this.msg = end + head
          }, 200)
        },
        stop() {
          // clearInterval不会报错  即使为null 也不会有影响
          clearInterval(this.timerId)
        }
        // foo() {
        //   console.log('foo被调用了!')
        // }
      }
    })
  </script>
</body>

</html>